<!-- 横向自动滚动组件 -->
<template>
  <div class="my-outbox">
    <div class="my-inbox" ref="box">
      <div class="my-list" ref="flowParent">
        <span ref="isOverflow" class="my-uname">{{sendVal}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-marquee-left',
  props: {
    sendVal: String,
  },
  data() {
    return {}
  },
  mounted: function () {
    var that = this
    var target = this.$refs.box
    var initLeft = 0
    let parentWidth = this.$refs.flowParent.offsetWidth
    let contentWidth = this.$refs.isOverflow.offsetWidth
    // 判断是否禁用tooltip功能
    if (parentWidth <= contentWidth) {
      setInterval(function () {
        initLeft++
        if (initLeft > target.offsetWidth / 2) {
          initLeft = 0
        }
        target.style = 'transform: translateX(-' + initLeft + 'px)'
      }, 100)
    }
  },
}
</script>

<style lang="scss" scoped>
.my-outbox {
  overflow: hidden;
  height: 100%;
  background-color: white;
  position: relative;
  .my-inbox {
    white-space: nowrap;
    position: absolute;
    width: 100%;
    .my-list {
      margin-right: 25px;
      display: inline-block;
      height: 35px;
      line-height: 35px;
      width: 100%;
      .my-uname {
        width: 70%;
        color: #6bb5e6;
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  .my-outbox {
    .my-inbox {
      .my-list {
        margin-right: 0px;
        height: 100%;
        line-height: 26px;
        font-size: 11px;
        width: 60%;
      }
    }
  }
}
</style>